<template>
  <div class="">
    <div class="flex items-center justify-between mb-2">
      <div v-if="title" class="font-bold">
        {{ title }}
      </div>
      <slot v-else name="title" />
    </div>
    <div class="w-full relative">
      <div v-if="type === 1">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="PersonalUserNum || 0" />
        </div>
      </div>
      <div v-if="type === 2">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="CompanyUserNum || 0" />
        </div>
        <div class="mt-2 text-green-600 text-sm font-bold font-mono">
          +{{ percentChange }}% <el-icon><TopRight /></el-icon>
        </div>
      </div>
      <div v-if="type === 3">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="ExceptUserNum || 0" />
        </div>
        <div class="mt-2 text-green-600 text-sm font-bold font-mono">
          +{{ percentChange }}% <el-icon><TopRight /></el-icon>
        </div>
      </div>
      <div v-if="type === 4">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="UserDataAmount || 0" />
        </div>
        <div class="mt-2 text-green-600 text-sm font-bold font-mono">
          +{{ percentChange }}% <el-icon><TopRight /></el-icon>
        </div>
      </div>

      <charts-content-number v-if="type === 5" height="14rem" />
      <charts-pie v-if="type === 6" height="14rem" :data="pieData[0]" title="饼图" />
      <div v-if="type === 7">
        <charts-bar :data="barData" :height="height" :title="title" />
      </div>
      <div v-if="type === 8">
        <charts-line :data="lineData" :height="height"  />
      </div>
      <div v-if="type === 9" class="flex items-center">
        <div class="w-1/2">
          <el-text class="font-bold"> 注册用户数折线图</el-text>
          <charts-content-number height="14rem" />
        </div>
        <div class="w-1/2">
          <el-text class="font-bold"> 用户数据交易收益折线图</el-text>
          <charts-content-number height="14rem" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import chartsContentNumber from "./charts-content-numbers.vue";
import chartsPie from "./charts-pie.vue";
import chartsBar from "./charts-bar.vue";
import chartsLine from "./charts-line.vue";
import { TopRight } from "@element-plus/icons-vue";

const props = defineProps({
  type: {
    type: Number,
    default: 1
  },
  title: {
    type: String,
    default: ""
  },
  pieData: {
    type: Array,
    default: () => [
      [ { value: 1048, name: '业务应用' }, { value: 735, name: '来源二' } ],
      [ { value: 580, name: '来源三' }, { value: 484, name: '来源四' } ],
      [ { value: 300, name: '视频广告' }, { value: 200, name: '其他' } ]
    ]
  },
  barData: {
    type: Array,
    default: () => [
      { name: '来源一', value: 10 },
      { name: '来源二', value: 20 },
      { name: '来源三', value: 30 },
      { name: '业务应用', value: 40 },
      { name: '来源四', value: 50 },
      { name: '来源五', value: 60 }
    ]
  },
  lineData: {
    type: Array,
    default: () => [
      { name: '来源三 ', value: 10 },
      { name: '来源二', value: 20 },
      { name: '业务应用', value: 30 }
    ]
  },
  PersonalUserNum: {
    type: Number,
    default: 0
  },
  CompanyUserNum: {
    type: Number,
    default: 0
  },
  ExceptUserNum: {
    type: Number,
    default: 0
  },
  UserDataAmount: {
    type: Number,
    default: 0
  },
  percentChange: {
    type: Number,
    default: 0
  }
});
</script>

<style scoped lang="scss">
</style>
